<template>
	<div id="ShopCart">
		<el-container style="height: 100%;">
			<el-header style="height: 55px;">
				<span style="padding-left: 50px; float: left; color: bisque; font-size: 40px; margin-top: 10px;">
					百&nbsp;货&nbsp;商&nbsp;城</span>
				<ul>
					<li>
						<div class="userImg">
							<el-avatar style="margin-top: 10px;" icon="el-icon-s-custom"></el-avatar>
							<!-- 把用户名传递过来 -->
							<span v-if="username">欢迎{{username}}</span>
							<span v-else style="color: skyblue;">
								<router-link to="/MemberLogin">去登录</router-link>
							</span>
						</div>
					</li>
					<li @click='changePage("Index")'>商城首页</li>
					<li style="color: red;" @click='changePage("ShopCart")'>购物车</li>
					<li @click='changePage("Favorites")'>收藏夹</li>
					<li @click='changePage("OrderCenter")'>我的订单</li>
					<li @click='changePage("PerCenter")'>个人中心</li>
					<li v-if="username" @click='changePage("exit")'>退出登录</li>
					<li style="color: greenyellow ; font-size: 22px;" @click='changePage("main")'>管理员入口</li>
				</ul>
			</el-header>
			<el-main>
				<div>
					<p>
						<input type="search" name="" id="" value="" placeholder="请输入搜索内容" />
						<el-button type="primary" icon="el-icon-search">搜索</el-button>
					</p>

					<el-table class="" ref="buyerTable" border stripe
						:data="cartList.slice((currentPage-1)*pageSize,currentPage*pageSize)" tooltip-effect="dark"
						style="width: 100%" height="520" border @selection-change="handleSelectionChange"
						:row-key="getkey">
						<el-table-column type="selection" width="55" :reserve-selection="true">
						</el-table-column>

						</el-table-column>
						<el-table-column label="商品名称" prop="goods_name" width="150" align="center" />
						<el-table-column label="图片" width="100" align="center">
							<template slot-scope="scope">
								<el-popover placement="right" trigger="hover">
									<el-image slot="reference" :src="scope.row.goods_small_logo" width="80" height="80"
										@click="getImgUrl(scope.row.goods_small_logo)" />
									<el-image style="width: 250px; height: 250px" :src="scope.row.goods_small_logo"
										fit="cover" />
								</el-popover>
							</template>
						</el-table-column>
						<el-table-column label="商品简介" prop="goods_introduce" />
						<el-table-column label="单价" prop="goods_price" width="190" header-align="center" align="center">
							<template slot-scope="scope">
								<div>￥{{ scope.row.goods_price }}</div>
							</template>
						</el-table-column>
						<el-table-column label="数量" prop="select_num" width="100">
							<template slot-scope="scope">
								<div class="amount-warp">
									<input class="border" @input="cartGoodsAmountChange($event,scope.row)"
										v-model="scope.row.select_num" />
									<div class="quick-button">
										<i class="border el-icon-arrow-up" @click="addAmountCount(scope.row)"></i>
										<i class="border el-icon-arrow-down"
											@click="subtractAmountCount(scope.row)"></i>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="小计" width="150" header-align="center" align="center">
							<template slot-scope="scope">
								<div>￥{{ (scope.row.goods_price * scope.row.select_num).toFixed(2) }}</div>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="80" align="center">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" content="删除" placement="top">
									<el-button size="mini" type="danger" icon="el-icon-delete"
										@click="deleteCartGoods(scope.row)" />
								</el-tooltip>
							</template>
						</el-table-column>
					</el-table>
					<div class="cart-option">
						<el-button type="danger" @click="batchDeleteCartGoods">删除选中商品</el-button>
						<div class="other-info">
							<div class="common">已选择<span class="total-num">{{this.multipleSelection.length}}</span>件商品
							</div>
							<div class="common">总价(不含运费):<span class="total-price">￥{{cartTotalPrice}}元</span></div>
							<el-button type="danger" @click="toPayment">去支付</el-button>
						</div>
					</div>
					<!-- 分页器 -->
					<div class="block" style="margin-top:15px;">
						<el-pagination align='center' @size-change="handleSizeChange"
							@current-change="handleCurrentChange" :current-page="currentPage"
							:page-sizes="[1,5,10,20,50,100]" :page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper" :total="cartList.length">
						</el-pagination>
					</div>
				</div>
			</el-main>
		</el-container>
		<!-- 显示待支付选中的商品信息 -->
		<el-dialog title="待支付商品信息" :visible.sync="showSelectListDialog">
			<el-table :data="multipleSelection" height="400px">
				<!-- <el-table-column property="goods_id" label="商品id" width="100"></el-table-column> -->
				<input type="hidden" v-model="multipleSelection.goods_id" />
				<el-table-column property="goods_name" label="商品名称" width="100"></el-table-column>
				<el-table-column property="goods_introduce" label="商品介绍" width="150"></el-table-column>
				<el-table-column property="goods_price" label="商品单价" width="150"></el-table-column>
				<el-table-column label="图片" width="100" align="center">
					<template slot-scope="scope">
						<el-popover placement="right" trigger="hover">
							<el-image slot="reference" :src="scope.row.goods_small_logo" width="80" height="80"
								@click="getImgUrl(scope.row.goods_small_logo)" />
							<el-image style="width: 250px; height: 250px" :src="scope.row.goods_small_logo"
								fit="cover" />
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column property="select_num" label="选择数量"></el-table-column>
				<el-table-column label="小计" width="150" header-align="center" align="center">
					<template slot-scope="scope">
						<div>￥{{ (scope.row.goods_price * scope.row.select_num).toFixed(2) }}</div>
					</template>
				</el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<div class="common">总价(不含运费):<span class="total-price">￥{{cartTotalPrice}}元</span></div>
				<el-button type="success" @click="selectAddress">选择收货地址</el-button>
				<el-button @click="showSelectListDialog = false">取 消</el-button>
				<el-button type="danger" @click="confirmOrder()">提交订单</el-button>
			</span>
		</el-dialog>

		<!-- 显示该会员的所有收货地址信息 -->
		<el-dialog title="选择收货地址信息" :visible="showAddressListTable">
			<el-row>
				<el-button type="primary" @click="addAddressDialog = true" plain>新增收货地址</el-button>
			</el-row>
			　<el-table ref="multipleTable" :data="addressList" tooltip-effect="dark" style="width: 100%">
				<el-table-column label="选择" width="65">
					<template slot-scope="scope">
						<el-radio :label="scope.row.address_id" v-model="radio"
							@change.native="getCurrentRow(scope.row)"></el-radio>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="收货人" width="120"></el-table-column>
				<el-table-column prop="tel" label="收货人电话" width="120"></el-table-column>
				<el-table-column prop="address" label="收货人地址" show-overflow-tooltip></el-table-column>
				<el-table-column label="默认地址">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.is_default == 1" type="success" style="width: 60px;text-align: center;">
							是 </el-tag>
						<el-tag v-if="scope.row.is_default == 0" type="danger" style="width: 60px;text-align: center;">否
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="250px">
					<template slot-scope="scope">
						<el-button type="primary" @click="setDefault(scope)" style="width: 70px;height: 30px;">设置默认
						</el-button>
					</template>
				</el-table-column>

			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryWhere.currentPage" :page-sizes="[5,10, 15, 20, 30]" :page-size="pageInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalRecord">
			</el-pagination>

			<span slot="footer" class="dialog-footer">
				<el-button @click="showAddressListTable = false">取 消</el-button>
				<el-button type="primary" @click="showAddressListTable = false">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="等待支付" :visible="showPayListDialog">
			<el-row>
				<el-button type="success" @click="toPayByMoney" plain>余 额 支 付</el-button>
				<el-button type="success" @click="toAliPay"plain>支 付 宝 支 付</el-button>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showPayListDialog = false">取 消</el-button>
				<el-button type="primary" @click="showPayListDialog = false">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="提示" :visible="addAddressDialog" width="1024" :before-close="handleClose">
			<!-- 修改的dialog -->
			<el-form :model="addAddressInfo" label-width="100px">
				<!-- <el-form-item label="商品编号" >
         <el-input v-model="goodsInfo.goods_id" ></el-input>
       </el-form-item> -->
				<el-form-item label="收货人昵称">
					<el-input v-model="addAddressInfo.name"></el-input>
				</el-form-item>
				<el-form-item label="收货人手机号">
					<el-input v-model="addAddressInfo.tel"></el-input>
				</el-form-item>
				<el-form-item label="收货人地址">
					<el-input v-model="addAddressInfo.address"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addAddressDialog = false">取 消</el-button>
				<el-button type="primary" @click="addAddress">确 定</el-button>
			</div>

		</el-dialog>

	</div>
</template>
<script>
	export default {
		mounted() {
			//this.getShopCartByMemberId(this.member_id);
		},
		created() {

			let memberInfo = window.sessionStorage.getItem("memberInfo");
			if (memberInfo) {
				console.log(memberInfo);
				let memberInfoObj = JSON.parse(memberInfo);
				console.log(memberInfoObj);
				this.member_id = memberInfoObj.member_id;
				console.log(this.member_id)


				this.username = memberInfoObj.username;

				this.getShopCartByMemberId(this.member_id);
			} else {
				this.$notify({
					title: '提示',
					message: "请先登录",
					duration: 2000
				});
				this.$router.push('/MemberLogin');
			}
		},
		data() {
			return {
				addAddressInfo: {
					member_id: "",
					name: "",
					tel: "",
					address: "",
				},
				queryWhere: {
					username: "",
					currentPage: 1,
					member_id: ""
				},
				pageInfo: {
					pageSize: 5,
					totalPage: 0,
					totalRecord: 0
				},
				addorderList: {
					order_code: "",
					payment_money: "",
					status: 2,
					member_id: "",
					address_id: "",
				},
				addorderDetailList: [],
				addorderDetail: {
					item_id: "",
					order_code: "",
					item_title: "",
					item_price: "",
					item_num: "",
					total: "",
				},
				activeIndex: '1',
				cartList: [],
				selectGoodsList: [],
				multipleSelection: [],
				select_lines: 0,
				currentPage: 1, // 当前页码
				total: 20, // 总条数
				pageSize: 5, // 每页的数据条数

				member_id: '',
				username: '',
				//支付显示用户所选择的商品信息
				showSelectListDialog: false,
				showAddressListTable: false,
				showPayListDialog: false,
				addAddressDialog: false,
				addressList: [],
				radio: "",
				getaddress_id: "",
			}
		},
		methods: {
			// 确认弹窗是否关闭
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						this.addAddressDialog = false;
					})
					.catch(_ => {});
			},
			// 新增收货地址
			addAddress() {
				// 表单验证
				if (!(/^1[3|4|5|6|7|8][0-9]\d{4,8}$/.test(this.addAddressInfo.tel))) {
					this.$message("手机号格式有误,请重新填写");
					return false;
				}
				console.log(this.addAddressInfo);
				let _this = this;
				let url = "/api/mall/AddressServlet2?method=insert"
				this.addAddressInfo.member_id = this.member_id;
				this.$http.get(url, {
					params: {
						addAddressInfo: this.addAddressInfo
					}
				}).then(function(response) {
					if (response.data.code == 0) {
						//关闭Dialog
						_this.dialogFormVisible = false;
						//重新刷新表格数据
						_this.getAddress();
						_this.addAddressDialog = false;
					} else {
						_this.$message.info("系统错误,请重试")
					}
				}).catch(function(response) {
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});
				})
			},
      // 支付宝支付
      toAliPay(){
        // let addorder = JSON.stringify(this.addorderList);
		  let arr=[]
		  //this.multipleSelection[i].shop_cart_id
		  for (let i = 0; i <this.multipleSelection.length; i++) {
		  	arr.push(this.multipleSelection[i].shop_cart_id);
		  }
		  
		  //置空
		  this.multipleSelection =[];
		  
		  let arrStr = arr.join(",");
		  console.log('!!!!!!!!!!!!!!!!!arrStr',arrStr);
		  alert(arrStr)
		  
		  //拼接需要的参数信息
    //       window.location.href = "/api/mall/order/confirm?totalMoney="
		  // +this.addorderList.payment_money
		  // +"&username="+this.username
		  // +"&order_code="+this.addorderList.order_code
		  // +"&item_ids="+arrStr
		  
		  //新打开一个页面 本页面不关闭
		  //window.open(`https://xxxx.xxxx.com/?id=${row.id}`, '_self')
		  window.open("/api/mall/order/confirm?totalMoney="
		  +this.addorderList.payment_money
		  +"&username="+this.username
		  +"&order_code="+this.addorderList.order_code
		  +"&item_ids="+arrStr,'_self');
		  
		  // window.open('https://www.baidu.com/')
		  
		  
		  
      },
			// 余额支付
			toPayByMoney() {
				let _this = this;
				let url = "/api/mall/OrderServlet2?method=payMoney"
				this.$http.get(url, {
					params: {
						orderList: this.addorderList
					}
				}).then(function(response) {
					if (response.data.code == 0) {
						// This.getAddress();
						console.log("成功了");
						_this.$message(response.data.msg);
						_this.showPayListDialog = false;
						_this.showSelectListDialog = false;
						// 成功之后,删除购物车商品
						_this.batchDeleteCartGoodsAfterOrder();
					} else {
						_this.$message.info(response.data.msg);
					}
				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});
				})
			},
			confirmOrder: function() {
				// 将order_code 为uuid
				// 给addorderList赋值
				console.log('点击了确定订单按钮')
				if (!this.getaddress_id) {
					this.$notify.info({
						title: '消息',
						message: "请选择收货地址",
					});
					return;
				}


				console.log('！！！！！！！！！！！如果收货地址为空 还来不来这里')
				this.addorderDetailList = [];
				const uuid = require('uuid');
				this.addorderList.order_code = uuid.v4();
				this.addorderList.payment_money = this.cartTotalPrice;
				this.addorderList.member_id = this.member_id;
				this.addorderList.address_id = this.getaddress_id;
				console.log("getaddress", this.getaddress_id);
				console.log("赋值后的addorderList", this.addorderList);
				for (var i = 0; i < this.multipleSelection.length; i++) {
					this.addorderDetail.item_id = this.multipleSelection[i].goods_id;
					this.addorderDetail.order_code = this.addorderList.order_code;
					this.addorderDetail.item_title = this.multipleSelection[i].goods_name;
					this.addorderDetail.item_price = this.multipleSelection[i].goods_price;
					this.addorderDetail.item_num = this.multipleSelection[i].select_num;
					this.addorderDetail.total = (this.addorderDetail.item_price * this.addorderDetail.item_num)
						.toFixed(2);
					this.addorderDetailList.push(this.addorderDetail);
					this.addorderDetail = {
							item_id: "",
							order_code: "",
							item_title: "",
							item_price: "",
							item_num: "",
							total: "",
						},
						console.log("addList", this.addorderDetailList);
					var jstr = JSON.stringify(this.addorderDetailList);
					console.log("jstr", jstr);
				}
				// 给addorderDetaiL赋值
				let _this = this;
				let url = "/api/mall/OrderServlet2?method=insert"
				this.$http.get(url, {
					params: {
						orderList: this.addorderList,
						addorderDetail: jstr
					}
				}).then(function(response) {
					if (response.data.code == 0) {
						// This.getAddress();
						console.log("成功了");
						_this.showPayListDialog = true;

					} else if (response.data.code == 9999) {
						_this.$notify.info({
							title: '消息',
							message: response.data.msg,
						});
					}
				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});
				})
			},
			setDefault: function(scope) {
				let This = this;
				let url = "/api/mall/AddressServlet2?method=updateById";

				this.$http.get(url, {
					params: {
						addressId: scope.row.address_id,
					}
				}).then(function(response) {
					if (response.data.code == 0) {
						This.getAddress();
					}
				}).catch(function(error) {
					console.log("服务端产生异常为:", error)
				})
			},
			getAddress: function() {
				let _this = this;
				let url = "/api/mall/AddressServlet2?method=queryById";
				this.queryWhere.member_id = this.member_id;

				this.$http.get(url, {
					params: this.queryWhere
				}).then(function(response) {
					console.log("服务端返回的数据为:", response);
					if (response.data.code == 0) {
						_this.queryWhere.currentPage = response.data.data.currentPage;
						_this.pageInfo.totalPage = response.data.data.totalPage;
						_this.pageInfo.totalRecord = response.data.data.totalRecord;

						_this.pageInfo.pageSize = response.data.data.pageSize;

						_this.addressList = response.data.data.data;
						for (let i = 0; i < _this.addressList.length; i++) {
							if (_this.addressList[i].is_default == 1) {
								_this.radio = _this.addressList[i].address_id;
								_this.getaddress_id = _this.radio;
							}
						}
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});
				})
			},
			// 拿到地址的id
			getCurrentRow(row) { //获取选中数据this.templateSelection = row;
				console.log("row.address", row.address_id);
				this.getaddress_id = row.address_id;
			},
			selectAddress() {
				this.showAddressListTable = true;
			},
			toPayment() {
				console.log('this.multipleSelection', this.multipleSelection)
				this.getAddress();
				this.showSelectListDialog = true;
			},
			getShopCartByMemberId: async function(memberId) {
				console.log('memberId', memberId)
				let _this = this;
				let url = "/api/mall/ShopCartServlet?method=getShopCartByMemberId";

				await this.$http.get(url, {
					params: {
						memberId: memberId,
					}
				}).then(function(response) {
					console.log("address服务端返回的数据为:", response);
					if (response.data.code == 0) {
						let CartItemList = response.data.data; //.itemGoods
						_this.cartList = [];
						for (let i = 0; i < CartItemList.length; i++) {
							let temp = CartItemList[i].itemGoods;
							temp.xiaoji = "",
								temp.select_num = CartItemList[i].select_num;
							temp.shop_cart_id = CartItemList[i].shop_cart_id;
							_this.cartList.push(temp);
						}

					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
			},

			removeShopItemById: async function(itemId) {
				console.log('itemId', itemId)
				let _this = this;
				let url = "/api/mall/ShopCartServlet?method=removeShopItemById";

				await this.$http.get(url, {
					params: {
						itemId: itemId,
					}
				}).then(function(response) {
					console.log("address服务端返回的数据为:", response);
					if (response.data.code == 0) {
						_this.$message(response.data.msg)
						for (var i = 0; i < _this.cartList.length; i++) {
							if (_this.cartList[i].shop_cart_id == itemId) {
								//数据库操作成功后前台删除
								_this.cartList.splice(i, 1);
								return;
							}
						}
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
			},
			batchRemoveShopItemByIdArray: async function(itemIdArray) {
				console.log('itemIdArray', itemIdArray)
				let _this = this;
				let url = "/api/mall/ShopCartServlet?method=batchRemoveShopItemByIdArray";
				let idArrayStr = itemIdArray.join(',')
				await this.$http.get(url, {
					params: {
						idArrayStr: idArrayStr,
					}
				}).then(function(response) {
					console.log("address服务端返回的数据为:", response);
					if (response.data.code == 0) {
						_this.$message(response.data.msg)
						//这里从新从数据库里查一次
						console.log("哦哦哦哦哦哦噢噢噢噢哦哦哦哦哦哦哦哦哦噢噢噢")
						_this.multipleSelection = [];
						_this.getShopCartByMemberId(_this.member_id);
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
			},

			batchRemoveShopItemByIdArray2: async function(itemIdArray) {
				let _this = this;
				let url = "/api/mall/ShopCartServlet?method=batchRemoveShopItemByIdArray";
				let idArrayStr = itemIdArray.join(',')
				await this.$http.get(url, {
					params: {
						idArrayStr: idArrayStr,
					}
				}).then(function(response) {
					if (response.data.code == 0) {
						//这里从新从数据库里查一次
						_this.multipleSelection = [];
						_this.getShopCartByMemberId(_this.member_id);
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
			},

			//解决触发两次handleSelectionChange
			getkey(row) {
				//console.log('row!!!!!!',row)
				//row.id的id必须存在并且是唯一的值
				return row.shop_cart_id;
				//console.log('row.shop_cart_id',row.shop_cart_id);
			},
			//select change
			handleSelectionChange(val) {
				console.log('@@@@@@@@@@@@@@@@@@@@@2', val);
				this.multipleSelection = val;
				// this.selectGoodsList = val;
				// this.select_lines = this.multipleSelection.length;
				console.log(this.multipleSelection);
				console.log(this.multipleSelection.length);
			},

			// 清空选择的值
			clearSelect() {
				this.$refs.buyerTable.clearSelection()
			},

			//改变每页显示记录的条数
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.currentPage = 1;
				this.pageSize = val;
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
			},

			//编辑按钮
			handleEdit(index, row) {
				console.log(index, row);
			},

			//删除按钮
			handleDelete(index, row) {
				console.log(index, row);
			},
			//获取图片路径
			getImgUrl(row) {
				console.log(row);
				// console.log(row.img);
				// return row.img;
			},
			//页面跳转事件
			changePage(path) {
				window.sessionStorage.setItem('activePath', '/' + path)
				if (path == "exit") {
					window.sessionStorage.removeItem("memberInfo")
					path = "MemberLogin"
					window.sessionStorage.setItem('activePath', '/' + path)
				}
				this.$router.push('/' + path);

			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex === 0) {
					return 'th';
				}
				return '';
			},
			switchChange() {
				this.istag = !this.istag;
			},
			current_change: function(currentPage) {
				this.currentPage = currentPage;
			},
			// 购物车选择事件（elemenUI表格勾选保存的值）
			cartSelectionChange(val) {
				this.multipleSelection = val;

			},
			// 商品数量文本框改变事件
			cartGoodsAmountChange(e, orderInfo) {
				if (e.target.value <= 0) {
					orderInfo.select_num = 1
					return this.$message.error('商品数量不能小于0')
				}
			},
			// 商品数量加1
			addAmountCount(orderInfo) {
				++orderInfo.select_num
			},
			// 商品数量减1
			subtractAmountCount(orderInfo) {
				if (orderInfo.select_num <= 1) {
					return this.$message.error('商品数量不能小于0')
				}
				--orderInfo.select_num
			},
			// 单个删除购物车商品
			deleteCartGoods(row) {
				console.log(row);
				this.$confirm('此操作将移除购物车的商品, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					this.removeShopItemById(row.shop_cart_id);
				}).catch((e) => {
					console.log(e)
					this.$message.info('已取消删除')
				})
			},
			// 批量删除购物车商品
			batchDeleteCartGoods() {
				if (this.multipleSelection.length > 0) {} else {
					return this.$message.error('请勾选要移除购物车的商品')
				}

				let arr = [];
				// 这里调用接口删除的方法 batchRemoveShopItemByIdArray
				for (let i = 0; i < this.multipleSelection.length; i++) {
					arr.push(this.multipleSelection[i].shop_cart_id);
				}

				this.$confirm('此操作将移除勾选的购物车的商品, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					console.log(55555555555555555555)
					//console.log('aaaaaaaaaaaaaaaaaaaarr',arr);
					this.batchRemoveShopItemByIdArray(arr);

				}).catch((e) => {
					console.log(e)
					this.$message.info('已取消删除')
				})
			},
			// 支付完成之后删除购物车内的商品
			batchDeleteCartGoodsAfterOrder() {

				let arr = [];
				// 这里调用接口删除的方法 batchRemoveShopItemByIdArray
				for (let i = 0; i < this.multipleSelection.length; i++) {
					arr.push(this.multipleSelection[i].shop_cart_id);
				}

				this.batchRemoveShopItemByIdArray2(arr);
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			}
		},
		computed: { //存在缓存，建议不经常的变化的在次操作
			//计算总价
			cartTotalPrice() {
				let sum = 0
				this.multipleSelection.forEach(item => {
					sum += item.goods_price * item.select_num
				})
				// 因为要保留小数点后面两位，所以要toFixed(2)
				return sum.toFixed(2);
				// return 0.0;
			},
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	#ShopCart {
		position: absolute;
		display: flex;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* background-color: #faffe5; */
	}

	.el-header {
		background-color: #cccccc;
		color: #333;
		text-align: center;
		height: 5%;
		line-height: 25px;
	}

	.el-main {
		/* background-color: #00ffff; */
		text-align: center;
		width: 100%;
		height: 95%;
	}

	.el-main>div {
		width: 90%;
		margin: 0px auto;
		padding-top: 20px;
		/* background-color: #0000FF; */
	}

	.el-container {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
	}

	.el-header>ul {
		position: absolute;
		right: 5px;
	}

	.el-header>ul>li {
		float: left;
		list-style: none;
		margin: 5px;
		user-select: none;
	}

	.el-header>ul>li:not(:first-child):hover {
		color: red;
		text-decoration: underline;
	}

	.el-avatar {
		position: absolute;
		left: -30px;
		top: 2px;
		width: 33px;
		height: 30px;
		color: #42B983;
		/* border: 1px solid #0000FF; */
	}

	.el-avatar--icon {
		font-size: 35px;
	}

	input[type="search"] {
		width: 600px;
		height: 35px;
		font-size: 15px;
		outline: none;
		border: 2px solid #0000FF;
		border-radius: 5px;
	}

	.el-main>div>p>.el-button {
		width: 60px;
		height: 35px;
		font-size: 15px;
		margin-bottom: 20px;
	}

	.cart-option {
		position: relative;
		height: 31px;
		/* font-size: 50px; */
		background-color: #c3c3c3;
		border: 1px solid transparent;
	}

	.cart-option>.el-button {
		position: absolute;
		left: 5px;
		top: 2px;
		height: 25px;
		line-height: 25px;
	}

	.other-info {
		position: absolute;
		display: flex;
		float: right;
		margin-right: 0px;
		left: 900px;
	}

	.other-info>.el-button {
		position: absolute;
		right: -50px;
		top: 2px;
		height: 25px;
		line-height: 25px;
	}

	.amount-warp {
		display: flex;
	}

	.amount-warp>input {
		width: 50px;
		height: 31px;
		line-height: 30px;
		padding-left: 10px;
		outline: none;
	}

	.amount-warp>.quick-button>i {
		display: block;
		width: 30px;
		height: 16px;
		border-left: none;
		text-align: center;
		line-height: 16px;
		cursor: pointer;
	}

	.border {
		border: 1px solid #a3a3a3;
	}

	.common {
		margin-right: 20PX;
	}

	.item {
		width: 50px;
		height: 30px;
	}

	.total-num {
		color: #FF0000;
	}

	.total-price {
		color: #FF0000;
		font-weight: 800;
	}

	ul>li {
		font-size: 20px;
		padding: 10px;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 150px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}
</style>
